<template>
  <el-row :gutter="20" class="risk">
    <el-col :span="8" style="padding-right: 10px">
      <el-card shadow="hover" class="mgb20">
        <div class="handle-box">
          <el-input v-model="query.name" suffix-icon="el-icon-search" class="handle-input mr10"></el-input>
        </div>
        <vxe-table
          align="center"
          :data="tableData"
          max-height="600px"
          :show-header="false"
        >
          <vxe-table-column field="money" title="money">
            <template v-slot="{row}">
              <el-row>
                <el-col :xs="6" :md="4">
                  <div class="pic-left">
                    <el-image class="table-td-thumb" :src="row.iconUrl"></el-image>
                  </div>
                </el-col>
                <el-col :xs="18" :md="20">
                  <div class="text-right">
                    <div class="text-top">
                      <span>{{row.money}}</span>
                      <span class="time">{{row.updateTime}}</span>
                    </div>
                    <div class="text-bottom">
                      <span>{{row.drawer}}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-card>
    </el-col>
    <el-col :span="16" style="padding-left: 1px">
      <el-card shadow="hover">
        <div slot="header" class="clearfix" style="height: 50px">
          <div class="total-left">
            <span>
              张数：
              <font class="total-number">{{billInfo.count}}</font> 张
              <br />总额：
              <font class="total-number">{{billInfo.totalMoney}}</font>
              {{billInfo.unit}}
            </span>
          </div>
          <div class="btn-right">
            <el-button
              style="background: #A3A0FB;border: #A3A0FB;height: 50px"
              type="primary"
              size="medium"
              class="el-icon-edit"
              @click="add"
            >添加</el-button>
          </div>
        </div>
        <div>
          <div class="plugins-tips" style="border-radius: 10px;background: #F0EFFF">
            <i class="el-icon-lx-warnfill" style="color: gold; font-size: 20px"></i>
            <span style="color: #C53636; font-weight: bolder">大回头，上下不一致</span>
          </div>
          <div>
            <el-tabs v-model="message">
              <el-tab-pane :label="`票据正面(${unread.length}手)`" name="first">
                <div class="plugins-tips" style="border-radius: 10px;background: #F5F5F5">
                  <el-row>
                    <el-col :span="4" style="width: 70px">
                      <span class="comm-font">票据编号：</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="comm-font3">{{ tabPaneData.billNo }}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" style="width: 70px">
                      <span class="comm-font">开票金额：</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="comm-font2">{{tabPaneData.billMoney}}</span>
                    </el-col>
                    <el-col :span="4" style="width: 70px">
                      <span class="comm-font">开票日期：</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="comm-font2">{{tabPaneData.billingDate}}</span>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="4" style="width: 70px">
                      <span class="comm-font">所在银行：</span>
                    </el-col>
                    <el-col :span="8">
                      <span class="comm-font2">{{tabPaneData.belongBank}}</span>
                    </el-col>
                    <el-col :span="4" style="width: 70px">
                      <span class="comm-font">到期日期：</span>
                    </el-col>
                    <el-col :span="8">
                      <span
                        class="comm-font2"
                      >{{tabPaneData.expireDate}}(剩余{{tabPaneData.leftDays}}天)</span>
                    </el-col>
                  </el-row>
                </div>

                <div v-for="(item,index) in tabPaneData.front" :key="index" class="front-bill">
                  <h3>{{item.desc}}</h3>
                  <el-row class="front-bill-content">
                    <el-col :span="20">
                      <el-row>
                        <el-col>
                          <span class="label">{{item.desc}}全称:</span>
                          <span class="value">{{item.acceptor}}</span>
                        </el-col>
                        <el-col>
                          <span class="label">开户行名称:</span>
                          <span class="value">{{item.bankName}}</span>
                        </el-col>
                        <el-col>
                          <span class="label">开户行行号:</span>
                          <span class="value">{{item.bankNo}}</span>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col :span="4">
                      <el-tag v-if="item.errorDesc" type="warning">{{item.errorDesc}}</el-tag>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="`票据反面(${read.length}手)`" name="second">
                <div class="plugins-tips" style="border-radius: 10px;background: #F5F5F5">
                  <el-row class="back-bill">
                    <el-col>
                      <span class="label">开票人全称:</span>
                      <span class="value">{{tabPaneData.drawer}}</span>
                    </el-col>
                    <el-col>
                      <el-row>
                        <el-col :span="20">
                          <span :class="{label:true,active:!!tabPaneData.billError}">收款人名称：</span>
                          <span
                            :class="{value:true,active:!!tabPaneData.billError}"
                          >{{tabPaneData.payee}}</span>
                        </el-col>
                        <el-col :span="4">
                          <el-tag
                            v-if="tabPaneData.billError"
                            type="warning"
                          >{{tabPaneData.billError}}</el-tag>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col>
                      <span class="label">是否可转让：</span>
                      <span class="value">{{tabPaneData.canTransfer ? "可转让":"不可转让"}}</span>
                    </el-col>
                  </el-row>
                </div>
                <div v-for="(item,index) in tabPaneData.back" :key="index" class="back-bill">
                  <el-row
                    type="flex"
                    justify="space-between"
                    style="padding-right: 20px;margin-left:20px;"
                  >
                    <el-col :span="20">
                      <h3>{{item.desc}}</h3>
                    </el-col>
                    <el-col :span="4">
                      <h3 style="width:90px;text-align:center;">第{{index+1}}手</h3>
                    </el-col>
                  </el-row>
                  <el-row class="back-bill-content">
                    <el-col>
                      <span class="label">背书人全称:</span>
                      <span class="value">{{item.endorser}}</span>
                    </el-col>
                    <el-col>
                      <el-row>
                        <el-col :span="20">
                          <span :class="{label:true,active:!!item.errorDesc}">被背书人名称:</span>
                          <span :class="{value:true,active:!!item.errorDesc}">{{item.endorsee}}</span>
                        </el-col>
                        <el-col :span="4">
                          <el-tag v-if="item.errorDesc" type="warning">{{item.errorDesc}}</el-tag>
                        </el-col>
                      </el-row>
                    </el-col>
                    <el-col>
                      <span class="label">背书日期:</span>
                      <span class="value">{{item.endorsementDate}}</span>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { fetchData, fetchRiskFrontBackData } from "@/api";

export default {
  name: "dashboard",
  data() {
    return {
      heihgt: "600",
      query: {
        address: "",
        name: "",
        pageIndex: 1,
        pageSize: 10
      },
      billInfo: {},
      tableData: [],
      tabPaneData: {},
      multipleSelection: [],
      delList: [],
      editVisible: false,
      pageTotal: 0,
      form: {},
      idx: -1,
      id: -1,
      message: "first",
      showHeader: false,
      unread: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护"
        },
        {
          date: "2018-04-19 21:00:00",
          title: "今晚12点整发大红包，先到先得"
        }
      ],
      read: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护"
        }
      ],
      recycle: [
        {
          date: "2018-04-19 20:00:00",
          title: "【系统通知】该系统将于今晚凌晨2点到5点进行升级维护"
        }
      ],
      bill1: [
        {
          date: "123",
          title: "承兑人",
          acceptor: "南京中电熊猫贸易有限公司",
          bankName: "中国工商银行新街口支行",
          bankNo: "5464596745335469"
        },
        {
          title: "出票人",
          acceptor: "南京中电熊猫贸易有限公司",
          bankName: "中国工商银行新街口支行",
          bankNo: "5464596745335469"
        },
        {
          title: "收款人",
          acceptor: "南京中电熊猫贸易有限公司",
          bankName: "中国工商银行新街口支行",
          bankNo: "5464596745335469"
        }
      ],
      bill2: [
        {
          title: "转让背书(可转让)",
          bsrqc: "南京中电熊猫贸易发展有限公司",
          bbsrmc: "深圳美好事业有限公司",
          bsrq: "2019年8月7日"
        },
        {
          title: "转让背书(可转让)",
          bsrqc: "深圳美好事业有限公司",
          bbsrmc: "南京宜企众信息科技有限公司",
          bsrq: "2019年8月7日"
        },
        {
          title: "转让背书(可转让)",
          bsrqc: "南京宜企众信息科技有限公司",
          bbsrmc: "中国农业银行南京仙林支行营业部",
          bsrq: "2019年8月7日"
        }
      ]
    };
  },
  components: {},
  created() {
    this.token = localStorage.getItem("ms_token");
    this.getData();
    this.fetchRiskFrontBackData();
  },
  methods: {
    async getData() {
      const params = { userId: "" };
      try {
        const { data, code, errMsg } = await fetchData();
        if (code === "1") {
          const { billList, count, unit, totalMoney } = data;
          this.tableData = billList;
          this.billInfo = { count, unit, totalMoney };
        } else {
          console.log(errorMsg);
          this.$message.error(errorMsg);
        }
      } catch (e) {
        console.log(e.errorMsg);
        this.$message.error(e.errorMsg);
      }
    },
    async fetchRiskFrontBackData() {
      const params = { billId: "" };
      try {
        const { data, code, errMsg } = await fetchRiskFrontBackData(params);
        if (code === "1") {
          this.tabPaneData = data;
        } else {
          this.$message.error(errorMsg);
        }
      } catch (e) {
        this.$message.error(e.errorMsg);
      }
    },
    add() {
      alert("开发中");
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.risk {
  .front-bill,
  .back-bill {
    margin-bottom: 10px;
    &-content {
      border: 1px solid #e5e5e5;
      border-radius: 8px;
      margin-top: 10px;
      padding: 10px 20px;
    }
    .label {
      display: inline-block;
      width: 80px;
      font-size: 12px;
      color: #999999;
      margin-right: 10px;
    }
    .value {
      font-size: 16px;
      color: #666666;
    }
    .active {
      color: #c53636;
    }
  }
  /deep/.el-tag.el-tag--warning {
    width: 90px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: #ffc847;
    border-radius: 10px;
    color: #000000;
    font-size: 12px;
  }
}
</style>
<style scoped lang="scss">
.handle-input {
  width: 100%;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
  margin-top: 10px;
}

.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
  background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
  color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
  background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
  color: rgb(242, 94, 67);
}

.user-info-cont div:first-child {
  font-size: 30px;
  color: #222;
}

.user-info-list span {
  margin-left: 70px;
}

.mgb20 {
  margin-bottom: 20px;
}

.todo-item {
  font-size: 14px;
}

.row-table {
  display: flex;
  .pic-left {
    // position: absolute;
    display: flex;
    width: 30%;
  }
}

.text-top {
  float: top;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: bolder;
  .time {
    color: #999999;
    font-size: 12px;
  }
}

.text-bottom {
  float: bottom;
  display: flex;
  font-size: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto 2px auto 2px;
  width: 50px;
  height: 50px;
}

.total-left {
  position: absolute;
  float: left;
  display: flex;
}

.btn-right {
  float: right;
}

.total-top {
  float: top;
  display: flex;
  height: 50%;
}

/*.total-bottom {*/
/*    position: absolute;*/
/*    float: bottom;*/
/*    display: flex;*/
/*    height: 50%;*/
/*}*/

.total-number {
  font-size: 20px;
  font-weight: bolder;
  color: #7370df;
}

.comm-font {
  color: #999999;
  font-size: 12px;
}
.comm-font2 {
  color: #666666;
  font-size: 16px;
}
.comm-font3 {
  color: #7370df;
  font-size: 16px;
  font-weight: bolder;
}
.comm-font4 {
  color: #333333;
  font-size: 16px;
}

.comm-font5 {
  color: #c53636;
  font-size: 16px;
}
</style>
